<template>
	<view>
		<uni-card>
			<view>
				<uni-segmented-control :current="current" :values="items"
					@clickItem="onClickItem"></uni-segmented-control>
				<view class="content">
					<view v-show="current === 0">
						<uni-forms ref="formDirector" :modelValue="formDataDirector" :rules="rulesDirector"
							label-position="top" label-width="100">
							<uni-forms-item name="directorId">
								<label>
									<uni-row>
										<uni-col :span="14">通讯设备编号</uni-col>
										<uni-col :span="10">
											<button type="primary" size="mini"
												style="position: relative;bottom: 20rpx;left: 20rpx;"
												@click="openScanCode">扫码录入</button>
										</uni-col>
									</uni-row>
								</label>
								<uni-easyinput type="number" v-model="formDataDirector.directorId"
									placeholder="请输入通讯设备编号" />
							</uni-forms-item>
							<uni-forms-item label="控制器编号(不带H)" name="directorCode">
								<uni-easyinput v-model="formDataDirector.directorCode" type="text" maxlength="2"
									placeholder="请输入16进制控制器编号" />
							</uni-forms-item>
							<uni-forms-item label="控制器名称" name="directorName">
								<uni-easyinput v-model="formDataDirector.directorName" type="text"
									placeholder="请输入控制器名称" />
							</uni-forms-item>
							<uni-forms-item label="备注" name="remark">
								<uni-easyinput v-model="formDataDirector.remark" type="textarea" autoHeight
									placeholder="请输入备注" />
							</uni-forms-item>
						</uni-forms>
						<view class="">
							<view class="" style="margin-bottom: 20rpx;">
								<button @click="submitDirector" type="primary">提交</button>
							</view>
							<view class="">
								<button @click="clearFormDirector">清空</button>
							</view>
						</view>
					</view>
					<view v-show="current === 1">
						<uni-forms ref="formSensor" :modelValue="formDataSensor" :rules="rulesSensor"
							label-position="top" label-width="100">
							<uni-forms-item name="sensorSn">
								<label>
									<uni-row>
										<uni-col :span="14">传感器编号</uni-col>
										<uni-col :span="10">
											<button type="primary" size="mini"
												style="position: relative;bottom: 20rpx;left: 20rpx;"
												@click="openScanCode">扫码录入</button>
										</uni-col>
									</uni-row>
								</label>
								<uni-easyinput type="text" v-model="formDataSensor.sensorSn"
									placeholder="请输入传感器编号,一般为 sn01，sn02" />
							</uni-forms-item>
							<uni-forms-item label="类型" name="type">
								 <uni-data-select
									  v-model="formDataSensor.type"
									  :localdata="t_director_sensor_type" />
							</uni-forms-item>
							<uni-forms-item label="控制器" name="director">
									<uni-data-select
										  v-model="formDataSensor.director"
										  :localdata="directorOptions" 
										  @change="changeDirector"/>
							</uni-forms-item>
							<uni-forms-item label="地址" name="address">
								<uni-easyinput v-model="formDataSensor.address" type="text"
									placeholder="请点击图标选择地址" suffixIcon="location" @iconClick="getChooseLocation" disabled />
							</uni-forms-item>
							<uni-forms-item label="经度" name="lng">
								<uni-easyinput v-model="formDataSensor.lng" type="text"
									placeholder="请点击地址" disabled/>
							</uni-forms-item>
							<uni-forms-item label="纬度" name="lat">
								<uni-easyinput v-model="formDataSensor.lat" type="text"
									placeholder="请点击地址" disabled/>
							</uni-forms-item>
							<uni-forms-item label="备注" name="remark">
								<uni-easyinput v-model="formDataSensor.remark" type="textarea" autoHeight
									placeholder="请输入备注" />
							</uni-forms-item>
						</uni-forms>
						<view class="">
							<view class="" style="margin-bottom: 20rpx;">
								<button @click="submitSensor" type="primary">提交</button>
							</view>
							<view class="">
								<button @click="clearFormSensor">清空</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script>
	import {
		updateDirector,
		listSelect
	} from '@/api/business/director.js'
	var amapFile = require('utils/amap-wx.130.js');
	import { addSensor } from '@/api/business/sensor.js'
	export default {
		data() {
			return {
				items: ['控制器', '传感器'],
				//字典
				t_director_alarm:[],
				t_director_sensor_type:[],
				// 表单数据
				formDataDirector: {
					directorId: null,
					directorCode: null,
					directorName: null,
					remark: null
				},
				formDataSensor: {
					sensorSn: null,
					director: null,
					directorId: null,
					directorCode: null,
					remark: null,
					address: null,
					lng: null,
					lat: null,
					type: null,
					alarmValue: null
				},
				rulesDirector: {
					// 对name字段进行必填验证
					directorId: {
						rules: [{
							required: true,
							errorMessage: '请输入通讯设备编号',
						}]
					},
					directorCode: {
						rules: [{
							required: true,
							errorMessage: '请输入控制器编号',
						}]
					},
					directorName: {
						rules: [{
							required: true,
							errorMessage: '请输入控制器名称',
						}]
					},
				},
				rulesSensor: {
					// 对name字段进行必填验证
					sensorSn: {
						rules: [{
							required: true,
							errorMessage: '请输入传感器编号',
						}]
					},
					type: {
						rules: [{
							required: true,
							errorMessage: '请选择传感器类型',
						}]
					},
					director: {
						rules: [{
							required: true,
							errorMessage: '请选择控制器',
						}]
					},
					address: {
						rules: [{
							required: true,
							errorMessage: '请选择所属位置',
						}]
					},

				},
				//控制器
				directorOptions:[],
				current: 1,
				//高德地图
				amapFun: undefined
			}
		},
		methods: {
			// 触发提交表单
			submitDirector() {
				this.$refs.formDirector.validate().then(res => {
					uni.showLoading({
						title: '提交中'
					});
					updateDirector(this.formDataDirector).then(response => {
						console.log(response)
						uni.hideLoading();
						uni.showToast({
							title: '成功',
							duration: 2000
						});
						this.clearFormDirector()
					});
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			clearFormDirector() {
				this.formDataDirector = {
					directorId: null,
					directorCode: null,
					directorName: null,
					remark: null
				}
			},
			// 触发提交表单
			submitSensor() {
				this.$refs.formSensor.validate().then(res => {
					uni.showLoading({
						title: '提交中'
					});
					addSensor(this.formDataSensor).then(response => {
						console.log(response)
						uni.hideLoading();
						uni.showToast({
							title: '成功',
							duration: 2000
						});
						this.clearFormSensor()
					});
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			clearFormSensor() {
				this.formDataSensor = {
					sensorSn: null,
					director: null,
					directorId: null,
					directorCode: null,
					remark: null,
					address: null,
					lng: null,
					lat: null,
					type: null,
					alarmValue: null
				}
			},
			openScanCode() {
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			changeDirector(e){
				if (!uni.$u.test.isEmpty(e)){
				    let director = e.split(",");
					console.log(e)
				    this.formDataSensor.directorId = director[0]
				    this.formDataSensor.directorCode = director[1]
				}
			},
			//获取经纬度
			getChooseLocation() {
				console.log(11111)
				let that=this
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						that.amapFun.getRegeo({
						  location: res.longitude+','+res.latitude,
						  success: function(data){
							//成功回调
							that.formDataSensor.address = data[0].name
							that.formDataSensor.lng = data[0].longitude
							that.formDataSensor.lat = data[0].latitude
							// //方式再次获取焦点 地图再次弹出
							// uni.hideKeyboard()
						  },
						  fail: function(info){
							//失败回调
							console.log(info)
						  }
						})
					},
					fail: (res) => {
						console.log(res)
					}
				})
			},
		},
		onLoad() {
			// this.getDicts('t_director_alarm').then(res =>{
			// 	let directorAlarm = res.data
			// 	directorAlarm.forEach(item =>{
			// 		this.t_director_alarm.push({value:item.dictValue ,text:item.dictLabel})
			// 	})
			// })
			this.getDicts('t_director_sensor_type').then(res =>{
				let directorSensorType = res.data
				directorSensorType.forEach(item =>{
					this.t_director_sensor_type.push({value:item.dictValue ,text:item.dictLabel})
				})
			})
			listSelect().then(response => {
				 let directorOptionsData= response.data;
				 directorOptionsData.forEach(item =>{
				 	this.directorOptions.push({value:item.directorId+','+item.directorCode ,text:item.directorName})
				 })
			  });
		  this.amapFun = new amapFile.AMapWX({key:'4ed422f198948fed99e6bf879244c3b1'});
		}
	}
</script>

<style lang="scss">
	// .map_container{
	//   // position: absolute;
	//   top: 0;
	//   bottom: 0;
	//   left: 0;
	//   right: 0;
	// }
</style>